import React from 'react';
import { Form, Search, Field } from '@teamix/ui';
import TableSection from '../components/table';
import debounce from 'lodash.debounce';
import './index.scss';
import intl from '../../../../locale';

const prefix = 'upgrade-records';
const FormItem = Form.Item;

export default class TbBuildResultTag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.field = new Field(this);
  }

  componentDidMount() {
    // 请求表格数据
    this.props.getAllRecords(1);
  }

  onSearch = (value) => {
    debounce(
      this.props.getAllRecords,
      500,
    )({
      page: 1,
      search: value,
    });
  };

  render() {
    const { allRecords, allRecordsPagination, isLoadingAllRecords, recordSearch } = this.props;

    return (
      <div className={`${prefix}`}>
        <div className={`${prefix}-title`}>
          {intl.get({
            id: 'code-assets.containers.records.UpgradedProject',
            defaultMessage: '已升级项目',
          })}
        </div>
        <div className={`${prefix}-form`}>
          <Form inline field={this.field}>
            <FormItem label="">
              <Search
                trim
                placeholder={intl.get({
                  id: 'code-assets.containers.records.SearchForProjectsProjectTeams',
                  defaultMessage: '搜索项目/项目组',
                })}
                value={recordSearch}
                onChange={(value) => {
                  this.props.updateData({
                    recordSearch: value,
                  });

                  this.onSearch(value);
                }}
                width={285}
              />
            </FormItem>
          </Form>
        </div>
        <TableSection
          {...{
            list: allRecords,
            isLoadingTable: isLoadingAllRecords,
            tablePagination: allRecordsPagination,
            onPageChange: (page) => {
              this.props.getAllRecords({
                page,
              });
            },
            dataType: 'record',
          }}
        />
      </div>
    );
  }
}
